window.onload = function () {

  var point = new Datatang.Point(900, 500)

  var path = [[400, 200], [500, 300], [500, 50], [80, 600]]
  var line = new Datatang.Line()
  line.path = path

  var rings = [[[500, 400], [490, 478], [350, 350], [500, 400]]]
  var polygon = new Datatang.Polygon(rings)

  var extent = new Datatang.Extent(1100, 300, 1400, 600)
  var extent1 = new Datatang.Extent(100, 300, 200, 600)

  var holeRings = [
    // 外环
    [
      [100, 600], [50, 680],
      [100, 760], [200, 690],
      [150, 580], [100, 600]
    ],
    // 洞1
    [
      [100, 640], [140, 650],
      [120, 680], [100, 640]
    ],
    // 洞2
    [
      [100, 690], [140, 700],
      [120, 720], [100, 690]
    ]
  ]
  var holePolygon = new Datatang.Polygon(holeRings)
  var x = 100,
    y = 100,
    z = 100;
  var points = [
    [343.05472305472324,
      450.00999000998996],
    [533.0547230547232,
      450.00999000998996],
    [533.0547230547232,
      293.6463536463536],
    [340.3274503274505,
      293.6463536463536],
    [x + z * Math.cos(45 * Math.PI / 180), -z * Math.sin(45 * Math.PI / 180)],
    [x + z * Math.cos(45 * Math.PI / 180), -y - z * Math.sin(45 * Math.PI / 180)],
    [547.6001776001777,
      399.100899100899],
    [547.6001776001777,
      295.4645354645354],
  ];
  var faces = [
    [points[4], points[5], points[7], points[6]], //后0
    [points[0], points[4], points[6], points[1]], //下1
    [points[0], points[3], points[5], points[4]], //左2
    [points[1], points[2], points[7], points[6]], //右3
    [points[2], points[3], points[5], points[7]], //上4
    [points[0], points[3], points[2], points[1]], //前5
  ]
  var cube = [
    //
    [
      faces[3]
    ], [
      faces[5]
    ]
  ]

  // 定义一个平行四边形
  var paralletogramRings = [[
    [650, 100], [700, 200], [1000, 200], [950, 100], [650, 100]]
  ]

  var paralletogram = new Datatang.Parallelogram(paralletogramRings)

  var mutilPolygon = new Datatang.MutilPolygon(mutilPolygonRings)

  // var features = [new Datatang.Feature(point),
  // new Datatang.Feature(line),
  // new Datatang.Feature(polygon),
  // new Datatang.Feature(holePolygon),
  // new Datatang.Feature(mutilPolygon),
  // new Datatang.Feature(paralletogram, null, '平行四边形'),
  // new Datatang.Feature(extent),
  // new Datatang.Feature(extent1)
  // ]
  var features = [new Datatang.Feature(mutilPolygon)]
  // 将会获取缺省样式
  var featureLayer = new Datatang.FeatureLayer()
  featureLayer.addFeatures(features)

  var mapextent = [0, 0, 1280, 720];

  var map = window.map = new Datatang.Map({
    layers: [
      new Datatang.SingleImageLayer({
        url: 'source/img-0000403420.png',
        imageExtent: mapextent,
        projection: {
          extent: mapextent
        }
      }),
      featureLayer
    ],
    target: 'map',
    view: new Datatang.View({
      projection: {
        extent: mapextent
      },
      center: Datatang.ExtentUtil.getCenter(mapextent),
      zoom: 2,
      maxZoom: 8
    })
  });

  var selectedFeatures = [new Datatang.Feature(point)]

  var modifyTool = new Datatang.Modify({
    features: selectedFeatures
  });

  map.addComponents(modifyTool)

  var typeSelect = document.getElementById('type')

  /**
   * Handle change event.
   */
  typeSelect.onchange = function () {
    var value = typeSelect.value
    if (value === 'point') {
      modifyTool.features = [new Datatang.Feature(point)]
    } else if (value === 'line') {
      modifyTool.features = [new Datatang.Feature(line)]
    } else if (value === 'polygon') {
      modifyTool.features = [new Datatang.Feature(polygon)]
    } else if (value === 'holePolygon') {
      modifyTool.features = [new Datatang.Feature(holePolygon)]
    } else if (value === 'mutilPolygon') {
      modifyTool.features = [new Datatang.Feature(mutilPolygon)]
    } else if (value === 'extent') {
      modifyTool.features = [new Datatang.Feature(extent)]
    } else if (value === 'parallelogram') {
      modifyTool.features = [new Datatang.Feature(paralletogram)]
    }
  }
}

